<template>
    <div class="xq-box">
        <head-go></head-go>
        <div class="page-box">
            <h2>{{hotelPage[idx].name}}</h2>
            <span class="grates">{{hotelPage[idx].grates}}</span>
            <p><i class="el-icon-location"></i>{{hotelPage[idx].address}}</p>
            <div class="hotel-img">
                <div class="img1" v-viewer="{movable: false}">
                    <img :src="require('@/'+hotelPage[idx].img)" height="300" width="450"/>
                </div>
                <div class="img2" v-viewer="{movable: false}">
                    <img :src="require('@/'+hotelPage[idx].img1)" height="147" width="145"/>
                </div>
                <div class="img3" v-viewer="{movable: false}">
                    <img :src="require('@/'+hotelPage[idx].img2)" height="147" width="145"/>
                </div>
                <div class="score">
                    <span class="pf">{{hotelPage[idx].score}}分</span>
                    <p class="discuss">{{hotelPage[idx].discuss}}条评论</p>
                    <div style="margin-top: 30px">
                        <template>
                            <button @click.once="flag=!flag" v-if="flag">加入购物车</button>
                            <button @click.once="flag=!flag" v-else>已加购</button>
                        </template>
                        <p style="font-size: 12px;margin:10px 0 0 -105px"><i class="el-icon-warning"></i>（点击加入购物车即可，系统默认大床房）</p>
                        <div class="mycar" @click="goUrlshopping()">
                            我的购物车
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="discuss-head">小主都这样说：</div>
        <div class="discuss-area">
            <div class="first-dis" v-for="(pp,index) in hotelPage[idx].tableData.slice(0,cun)" :key="index" >
                <span class="username">{{pp.username}}:</span>
                <span class="date">{{pp.date}}</span>
                <p>{{pp.province}}</p>
            </div>
        </div>
        <div class="more-pl" v-show="ckgddiv">
            <span @click="openckgd()">全部评论</span>
        </div>
        <with-us></with-us>
    </div>
</template>
<script>
    import HotelPage from "@/assets/data/hotelsPage.json";
    import HeadGo from "@/components/HeadGo";
    import WithUs from "@/components/WithUs";
    import { directive as viewer } from "v-viewer"
    export default {
        name: "hotelPage",
        components:{HeadGo,HotelPage,WithUs},
        directives: {
            viewer: viewer({
                debug: true,
            }),
        },
        data(){
            return{
                hotelPage:HotelPage.smarthotels,
                idx:'',
                cun:4,
                ckgddiv:true,
                flag:true
            }
        },
        created() {
            this.idx=this.$route.params.hotel_id
        },
        methods:{
            openckgd(){
                this.cun+=this.hotelPage[this.idx].tableData.length;
                this.ckgddiv=false;
            },
            goUrlshopping(){
                this.$router.push({path:'/shopping'})
            }
        }
    }
</script>

<style scoped>
    .xq-box{
        background: #f7f7f7;
    }
    .page-box{
        text-align: center;
    }
    .page-box h2{
        font-size: 28px;
        padding: 10px;
        //border: 1px solid black;
        width: 500px;
        display: inline-block;
        float: left;
    }
    .page-box span{
        display: inline-block;
        float: left;
    }
    .grates{
        margin-top: 80px;
        border-radius: 10px;
        background: rgba(0, 133, 208, 0.4);
        color: #0085d0;
        width: 70px;
    }
    .page-box p{
        width: 500px;
    }
    .hotel-img{
        width: 900px;
        height: 300px;
        //border: 1px solid black;
        margin-left:180px;
        margin-top: 10px;
        background: white;
        border-radius: 5px;
    }
    .img1 img{
        width: 450px;
        height: 300px;
    //border: 1px solid black;
        border-radius: 5px 0 0 5px;
        display: inline-block;
        float: left;
    }
    .img2 img{
    //border: 1px solid black;
        float: left;
        margin-left: 7px;
        border-top-right-radius:5px ;
    }
    .img3 img{
        border-bottom-right-radius: 5px;
        float: left;
        margin-left: -144.9px;
        margin-top: 153px;
    }
    .score{
        //border: 1px solid black;
        height: 300px;
        width: 290px;
        float: right;
    }
    .score button{
        width: 100px;
        height: 40px;
        border-radius: 5px;
        color: white;
        border: none;
        background: #056da1;
        font-weight: bold;
        margin: 0 auto;
    }
    .pf{
    //border: 1px solid black;
        margin-left: 50px;
        margin-top: 40px;
        font-size: 34px;
        color: #0085d0;
        font-weight: bold;
    }
   .discuss{
       //border: 1px solid black;
       margin-top: 80px;
       display: block;
       margin-left: -200px;
       color: #ff6600;
   }
    .discuss-head{
        border-bottom: 7px solid #0085d0;
        width: 175px;
        height: 60px;
        font-size: 24px;
        margin-left: 200px;
        line-height: 75px;
    }
    .discuss-area{
        width: 900px;
        margin-left: 200px;
        text-align: left;
        color: #6a6868;
        word-wrap: break-word;
    }
    .username{
        margin:10px 0 0 5px;
        font-size: 12px;
        color: #056da1;
    }
    .date{
        float: right;
        margin: 10px 30px 0 0;
        font-size: 12px;
    }
    .discuss-area p{
        margin-top: 10px;
        font-size: 13px;
    }
    .first-dis{
        padding: 10px;
        border-bottom: #726f6f;
    }
    .first-dis:hover{
        background: white;
    }
    .more-pl{
        color: #056da1;
        font-size: 14px;
        margin: 10px  0 0 900px;
    }
    .together-us{
        width: 60px;
        height: 180px;
        position: fixed;
        top:300px;
        left: 1370px;
        color: #056da1;
    }
    .together-us .el-icon-s-shop{
        font-size: 60px;
    }
    .together-us span{
        font-size: 20px;
        margin-top: 40px;
        text-align: center;
        border:1px solid #056da1;
        display: inline-block;
    }
    .el-icon-location{
        margin-right: 10px;
        color: #6a6868;
    }
    .mycar{
        float: right;
        color: #056da1;
        font-size: 14px;
        margin: 50px 10px 10px 0;
    }
</style>